import './index.scss'
import { useMount, useEventEmitter } from 'ahooks'
import { ConfigProvider, FloatButton, Tooltip } from 'antd'
import { useState, lazy } from 'react'
import { GetIndexedDB } from '../Utils/IndexedDB'
import { SlidersOutlined } from '@ant-design/icons'

import { BackGrundType } from '../Utils/BackGrundType'
import { ThemeBackImageList } from '../Config/config'


const Loading = lazy(() => import('../View/Loading/LoadSvg'))
const { port } = window.location

// 锁屏状态判断页面刷新
// 锁屏时打开debug
// window.onbeforeunload = function () {
//     return "页面离开提示";
// };

const AdminPage = () => {
    const [StyleConfig, setStyleConfig] = useState()
    const [ThemeTemp, setThemeTemp] = useState()
    // 获取系统配置
    const getStyleConfig = async () => {
        const config = await GetIndexedDB('theme')
        const Temp = lazy(() => import(`./Theme/${config.theme}.jsx`))
        setThemeTemp(Temp)
        setStyleConfig(config)
        // !!! 添加其他预期的配置
    }

    useMount(() => { getStyleConfig() })
    const PageEvent = useEventEmitter()
    PageEvent.useSubscription(val => {
        const { type } = val
        if (type === 'updateTheme' || type === 'updateMenu' || type === 'updateBody') getStyleConfig()
        // 更新首页

    })


    if (StyleConfig) {
        const { themeConfig, menuConfig, bodyConfig } = StyleConfig
        const { MenuConfig } = menuConfig
        const { NavConfig } = bodyConfig
        const { BackData, BackMask, BackType, BackValue, Color, MaskColor } = themeConfig

        return (
            <div className='AdminPage'
                style={BackType === 'Color' ? { background: BackValue } :
                    BackType === 'Ground' ? BackGrundType[BackValue](BackData) : {}
                }
            >
                {BackType === 'Image' && <img className='ImageBack' src={ThemeBackImageList[BackValue]} alt="" />}
                <div className='Mask' style={{ background: MaskColor, backdropFilter: `blur(${BackMask}px)` }} />
                <ConfigProvider
                    theme={{
                        token: { colorPrimary: Color },
                        components: {
                            Menu: { itemBg: 'transparent', subMenuItemBg: 'transparent', ...MenuConfig },
                            Tabs: NavConfig
                        }
                    }}
                >
                    <ThemeTemp PageEvent={PageEvent} />
                </ConfigProvider>
            </div>
        )
    } else return <Loading />
};

export default AdminPage;